<template>
  <a-row :gutter="20">
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url1"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-title">总合同数量（个）</p>
          <p class="gutter-subTitle subTitle-1">36</p>
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url2"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-title">已完成合同数量（个）</p>
          <p class="gutter-subTitle subTitle-2">174</p>
        </div>

      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url3"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-title">总购气量（万吨）</p>
          <p class="gutter-subTitle subTitle-3">100</p>
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url4"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-title">已完成运输（万吨）</p>
          <p class="gutter-subTitle subTitle-4">636</p>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script setup>
const url1 = require('../../../../assets/images/ResourceContract/card1.png')
const url2 = require('../../../../assets/images/ResourceContract/card2.png')
const url3 = require('../../../../assets/images/ResourceContract/card3.png')
const url4 = require('../../../../assets/images/ResourceContract/card4.png')
</script>

<style lang="scss" scoped>
.gutter-row {
  width: 25%;
}
.gutter-box {
  padding: 35px 20px;
  display: flex;
  // background: #ffffff;
  text-align: left;
  background: url("../../../../assets/images/LngArrangement/card-bg.jpg")no-repeat;
  background-size: 100% 100%;
  .gutter-left {
    margin-left: 20px;
    .gutter-title {
       font-size: 16px;
       color: #2C3749;
    }
    .gutter-subTitle {
      font-size: 32px;
      font-weight: bold;
      color: #2C3749;
    }
    .subTitle-1{
      color: #6A73FF;
    }
    .subTitle-2{
      color: #0062FF;
    }
    .subTitle-3{
      color: #FA6400;
    }
    .subTitle-4{
      color: #F7B500;
    }
    .subTitle-5{
      color: #44D7B6;
    }
  }
  .gutter-right {
    width: 72px;
    height: 72px;
  }
}
</style>
